<template>
    <div class="wrapper">
        <div class="main">
            <el-form class="ele-form-search" style="margin-top: 20px">
                <el-row :gutter="15">
                    <el-col :lg="10" :md="12">
                        <el-form-item label="时间搜索:">
                            <el-date-picker
                                v-model="searchParams.dates"
                                value-format="YYYY-MM-DD"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-Search"
                                class="ele-btn-icon"
                                @click="handleSearch">查询
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <el-row class="main-top" :gutter="20">

                <!-- 会员注册数 -->
                <el-col :sm="12" :lg="6" >
                    <el-card class="top-card" shadow="hover" >
                        <el-row justify="start">
                            <el-col :span="15" class="title-box" >
                                <div class="title-top">
                                    <el-badge :value="state.tongji.total_amount.count" class="item">
                                        <el-button style="border: none;padding: 0px 15px" size="small">合同总金额
                                        </el-button>
                                    </el-badge>
                                </div>
                                <div class="title-center">{{ state.tongji.total_amount.total_money || 0.00}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 附件上传数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover" >
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">
                                    <el-badge :value="state.tongji.total_income.count" class="item">
                                        <el-button style="border: none;padding: 0px 15px" size="small">项目总计到款
                                        </el-button>
                                    </el-badge>
                                </div>
                                <div class="title-center">{{ state.tongji.total_income.money || 0.00}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 会员总数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">
                                    <el-badge :value="state.tongji.channel.count" class="item">
                                        <el-button style="border: none;padding: 0px 15px" size="small">渠道实际总收入
                                        </el-button>
                                    </el-badge>
                                </div>
                                <div class="title-center">{{ state.tongji.channel.income || 0.00}}</div>
                            </el-col>

                        </el-row>
                    </el-card>
                </el-col>
                <!-- 模块安装数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">
                                    <el-badge :value="state.tongji.maint.count" class="item">
                                        <el-button style="border: none;padding: 0px 15px" size="small">维护总收入
                                        </el-button>
                                    </el-badge>
                                </div>
                                <div class="title-center">{{ state.tongji.maint.money || 0.00}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>

            <el-row class="main-top" :gutter="20">
                <!-- 会员注册数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">
                                    <el-badge :value="state.tongji.taobao.count" class="item">
                                        <el-button style="border: none;padding: 0px 15px" size="small">淘宝刷单支出
                                        </el-button>
                                    </el-badge>
                                </div>
                                <div class="title-center">{{ state.tongji.taobao.total_money || 0.00}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 附件上传数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">
                                    <el-badge :value="state.tongji.other.count" class="item">
                                        <el-button style="border: none;padding: 0px 15px" size="small">其他总支出
                                        </el-button>
                                    </el-badge>
                                </div>
                                <div class="title-center">{{ state.tongji.other.money || 0.00}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>


                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">
                                    客户总数量
                                </div>
                                <div class="title-center">{{ state.tongji.custom_nums || 0}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>


                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">
                                    项目总数量
                                </div>
                                <div class="title-center">{{ state.tongji.project_nums || 0 }}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>


            <el-tabs v-model="state.activeName" @tab-click="handleClick">
                <el-tab-pane label="项目统计" name="first"></el-tab-pane>
                <el-tab-pane label="支出统计" name="second"></el-tab-pane>
                <el-tab-pane label="渠道统计" name="third"></el-tab-pane>
            </el-tabs>


            <!-- 项目 -->
            <el-row class="main-center" :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="card-message" shadow="hover">
                        <div class="msg-title-box">
                            <h4 class="title">项目统计</h4>
                        </div>
                        <div class="wellcom-div"></div>
                    </el-card>
                </el-col>

                <!-- 附件加下数 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card class="center-card" shadow="hover">
                        <h6>项目到款统计</h6>

                        <div style="margin-top: 20px">
                            <el-radio-group v-model="searchParams.year" @change="getYearChart">
                                <el-radio-button label="2024"></el-radio-button>
                                <el-radio-button label="2025"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="view-column" :ref="chartRefsProject.set"></div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="center-card" shadow="hover">
                        <h6>项目到款年份报告</h6>
                        <div style="margin-top: 20px">
                            <el-table
                                :data="state.projectYear"
                                style="width: 90%">
                                <el-table-column
                                    prop="year"
                                    label="年份"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="total_income"
                                    label="实际到款"
                                >
                                </el-table-column>
                            </el-table>
                        </div>

                    </el-card>
                </el-col>
            </el-row>


            <!-- 支出 -->
            <el-row class="main-center" :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="card-message" shadow="hover">
                        <div class="msg-title-box">
                            <h4 class="title">支出统计</h4>
                        </div>
                        <div class="wellcom-div"></div>
                    </el-card>
                </el-col>


                <!-- 附件加下数 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card class="center-card" shadow="hover">
                        <h6>支出统计</h6>

                        <div style="margin-top: 20px">
                            <el-radio-group v-model="searchParams.other" @change="getOtherChart">
                                <el-radio-button label="2024"></el-radio-button>
                                <el-radio-button label="2025"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="view-column" :ref="chartRefsOther.set"></div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="center-card" shadow="hover">
                        <h6>支出年份报告</h6>
                        <div style="margin-top: 20px">
                            <el-table
                                :data="state.otherYear"
                                style="width: 90%">
                                <el-table-column
                                    prop="year"
                                    label="年份"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="total_pay"
                                    label="实际支出"
                                >
                                </el-table-column>
                            </el-table>
                        </div>

                    </el-card>
                </el-col>
            </el-row>


            <!-- 渠道 -->
            <el-row class="main-center" :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="card-message" shadow="hover">
                        <div class="msg-title-box">
                            <h4 class="title">渠道统计</h4>
                        </div>
                        <div class="wellcom-div"></div>
                    </el-card>
                </el-col>

                <!-- 附件加下数 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card class="center-card" shadow="hover">
                        <h6>渠道统计</h6>

                        <div style="margin-top: 20px">
                            <el-radio-group v-model="searchParams.channel" @change="getChannelChart">
                                <el-radio-button label="2024"></el-radio-button>
                                <el-radio-button label="2025"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="view-column" :ref="chartRefsChannel.set"></div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="center-card" shadow="hover">
                        <h6>渠道年份报告</h6>
                        <div style="margin-top: 20px">
                            <el-table
                                :data="state.channelYear"
                                style="width: 90%">
                                <el-table-column
                                    prop="year"
                                    label="年份"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="total_income"
                                    label="实际收入"
                                >
                                </el-table-column>
                            </el-table>
                        </div>

                    </el-card>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script setup lang="ts">
import {useTemplateRefsList} from '@vueuse/core'
import * as echarts from 'echarts'
import {onMounted, nextTick, reactive, onActivated, onBeforeMount, watch,ref} from 'vue'
import {useNavTabs} from '/@/stores/navTabs'
import {index,projectYearChart,otherYearChart,channelYearChart} from "/@/api/backend/dashboard";

const navTabs = useNavTabs()

const state: {
    projectCharts: any[]
    otherCharts: any[]
    channelCharts: any[]
    projectYear: any[]
    otherYear: any[]
    channelYear: any[]
    remark: string
    workingTimeFormat: string,
    tongji: Object,
    pauseWork: boolean,
    activeName:string,
} = reactive({
    projectCharts: [],
    otherCharts: [],
    channelCharts: [],
    projectYear: [],
    otherYear: [],
    channelYear: [],
    remark: 'dashboard.Loading',
    workingTimeFormat: '',
    pauseWork: false,
    tongji: {
        taobao: {
            total_money: 0.00,
            count: 0
        },
        channel: {
            income: 0.00,
            count: 0
        },
        other: {
            money: 0.00,
            count: 0
        },
        maint: {
            money: 0.00,
            count: 0
        },
        total_amount: {
            total_money: 0.00,
            count: 0
        },
        total_income: {
            money: 0.00,
            count: 0
        },
        custom_nums: 0,
        project_nums: 0
    },
    activeName:'first'
})

const currentYear = new Date().getFullYear();

const searchParams = ref({
    dates: [],
    year:currentYear,
    other:currentYear,
    channel:currentYear
});


const chartRefsProject = useTemplateRefsList<HTMLDivElement>()
const chartRefsOther = useTemplateRefsList<HTMLDivElement>()
const chartRefsChannel = useTemplateRefsList<HTMLDivElement>()



const handleSearch = async () => {
    index(searchParams.value.dates).then((res) => {
        state.remark = res.data.remark
        state.tongji = res.data.tongji
    })
}


const getYearChart = async ()=>{
    projectYearChart(searchParams.value.year).then((res)=>{
        state.projectCharts = res.data.projectInCome
        projectChart()
    })
}


const getChannelChart = async ()=>{
    channelYearChart(searchParams.value.channel).then((res)=>{
        state.channelCharts = res.data.channelIncome
        channelChart()
    })
}


const getOtherChart = async ()=>{
    otherYearChart(searchParams.value.other).then((res)=>{
        state.otherCharts = res.data.otherPay
        othertChart()
    })
}



index([]).then((res) => {
    state.remark = res.data.remark
    state.tongji = res.data.tongji
    state.projectYear = res.data.projectYear
    state.otherYear = res.data.otherYear
    state.channelYear = res.data.channelYear
})


const channelChart = ()=>{
    const userGrowthChart = echarts.init(chartRefsChannel.value[0] as HTMLElement)
    // prettier-ignore
    let dataAxis = state.channelCharts.map(d => d.month)
    // prettier-ignore
    let data = state.channelCharts.map(d => d.total_pay)
    let yMax = 500
    let dataShadow = []

    for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
    }

    const option = {

        tooltip: {
            trigger: 'item',
            // 可以在这里添加更多 tooltip 配置
            axisPointer: {
                type: 'line',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                color: '#fff',
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
            },
            z: 10,
        },
        yAxis: {
            axisLine: {
                show: true,
            },
            axisTick: {
                show: true,
            },
            axisLabel: {
                color: '#999',
            },
        },
        dataZoom: [
            {
                type: 'slider',
            },
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'},
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'},
                        ]),
                    },
                },
                data: data,
            },
        ],
    }

    // Enable data zoom when user click bar.
    const zoomSize = 6
    userGrowthChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
        userGrowthChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
        })
    })
    userGrowthChart.setOption(option)
    state.channelCharts.push(userGrowthChart)
}


const othertChart = ()=>{
    const userGrowthChart = echarts.init(chartRefsOther.value[0] as HTMLElement)
    // prettier-ignore
    let dataAxis = state.otherCharts.map(d => d.month)
    // prettier-ignore
    let data = state.otherCharts.map(d => d.total_pay)
    let yMax = 500
    let dataShadow = []

    for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
    }

    const option = {

        tooltip: {
            trigger: 'item',
            // 可以在这里添加更多 tooltip 配置
            axisPointer: {
                type: 'line',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                color: '#fff',
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
            },
            z: 10,
        },
        yAxis: {
            axisLine: {
                show: true,
            },
            axisTick: {
                show: true,
            },
            axisLabel: {
                color: '#999',
            },
        },
        dataZoom: [
            {
                type: 'slider',
            },
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'},
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'},
                        ]),
                    },
                },
                data: data,
            },
        ],
    }

    // Enable data zoom when user click bar.
    const zoomSize = 6
    userGrowthChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
        userGrowthChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
        })
    })
    userGrowthChart.setOption(option)
    state.otherCharts.push(userGrowthChart)
}



const projectChart = ()=>{
    const userGrowthChart = echarts.init(chartRefsProject.value[0] as HTMLElement)
    // prettier-ignore
    let dataAxis = state.projectCharts.map(d => d.month)
    // prettier-ignore
    let data = state.projectCharts.map(d => d.total_income)
    let yMax = 500
    let dataShadow = []

    for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
    }

    const option = {

        tooltip: {
            trigger: 'item',
            // 可以在这里添加更多 tooltip 配置
            axisPointer: {
                type: 'line',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                color: '#fff',
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
            },
            z: 10,
        },
        yAxis: {
            axisLine: {
                show: true,
            },
            axisTick: {
                show: true,
            },
            axisLabel: {
                color: '#999',
            },
        },
        dataZoom: [
            {
                type: 'slider',
            },
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'},
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'},
                        ]),
                    },
                },
                data: data,
            },
        ],
    }

    // Enable data zoom when user click bar.
    const zoomSize = 6
    userGrowthChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
        userGrowthChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
        })
    })
    userGrowthChart.setOption(option)
    state.projectCharts.push(userGrowthChart)
}




const initUserGrowthChart = () => {

}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.projectCharts) {
            state.projectCharts[key].resize()
        }

        for (const key in state.otherCharts) {
            state.otherCharts[key].resize()
        }

        for (const key in state.channelCharts) {
            state.channelCharts[key].resize()
        }
    })
}

onMounted(() => {
    initUserGrowthChart()
    getYearChart()
    getOtherChart()
    getChannelChart()
    window.addEventListener('resize', echartsResize)
})

onBeforeMount(() => {
    for (const key in state.projectCharts) {
        state.projectCharts[key].dispose()
    }

    for (const key in state.otherCharts) {
        state.otherCharts[key].dispose()
    }

    for (const key in state.channelCharts) {
        state.channelCharts[key].dispose()
    }
    window.removeEventListener('resize', echartsResize)
})

onActivated(() => {
    echartsResize()
})
watch(
    () => navTabs.state.tabFullScreen,
    () => {
        echartsResize()
    }
)
</script>

<style scoped lang="scss">
.wrapper {
    margin: 30px;

    .ba-card-border {
        // border style
        border: 1px;
        border-style: dashed;
        border-color: #e9e6e1;
        border-radius: 0.75rem;
    }

    .main {
        .main-top {
            > * {
                margin-top: 1rem;
                max-width: 100%;
            }

            .top-card {
                @extend .ba-card-border;
                --el-card-padding: 2rem;
                display: flex;
                flex-direction: column;

                .title-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;

                    .title-top {
                        font-size: 14px;
                    }

                    .title-center {
                        font-size: 2rem;
                        font-weight: bold;

                        i {
                            color: #9399a1;
                            font-size: var(--el-font-size-extra-small);
                        }
                    }
                }

                .top-progress {
                    display: flex;
                    justify-content: start;
                }
            }
        }

        .main-center {
            margin-top: 1rem;

            > * {
                margin-top: 1rem;
            }

            .card-message {
                height: 100%;
                @extend .ba-card-border;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: end;

                :deep(.el-card__body) {
                    padding: 0;
                    width: 100%;
                }

                .msg-title-box {
                    margin-bottom: 18rem;
                    padding: 2rem 4rem 0rem 3rem;

                    .title {
                        color: var(--el-text-color-primary);
                        font-size: 2rem;
                        text-align: center;
                    }

                    .msg {
                        color: var(--el-text-color-primary);
                        text-align: center;
                        margin-top: 1rem;
                    }
                }

                .wellcom-div {
                    margin-top: 2rem;
                    width: 100%;
                    position: relative;
                    text-align: center;
                    background: url('/@/assets/ripple.gif') 100% 40% no-repeat;
                    height: 50px;
                }
            }

            .center-card {
                @extend .ba-card-border;
                --el-card-padding: 25px 15px 15px 20px;
                font-weight: 600;
                height: 100%;

                .user-source {
                    margin-bottom: 20px;
                }

                .view-column {
                    height: 30rem;
                }

                .view-pie {
                    height: 30rem;
                }
            }
        }

        .main-slide {
            margin-top: 1rem;

            > * {
                margin-top: 1rem;
            }

            .el-card {
                @extend .ba-card-border;
                height: 8rem;
                height: 100%;
            }

            :deep(.el-card__body) {
                height: 100%;
            }

            .slide-box {
                display: flex;
                align-items: center;
                height: 100%;
                text-align: center;

                .slide-box-title {
                    display: inline;
                    font-size: var(--el-font-size-medium);
                    margin-right: 0.5rem;
                }
            }
        }

        .main-bottom {
            margin-top: 1rem;

            > * {
                margin-top: 1rem;
            }

            .bottom-card {
                height: 100%;
                @extend .ba-card-border;
                --el-card-padding: 25px 15px 15px 20px;

                :deep(.el-card__body) {
                    height: 100%;
                }

                .bottom-reports {
                    margin: 4rem 1.5rem 0 1.5rem;
                    font-size: var(--el-font-size-medium);

                    h3 {
                        margin-top: 1rem;
                    }

                    h5 {
                        margin: 0.5rem 0 1rem 0;
                    }

                    .reports-more {
                        margin-top: 2rem;

                        .color-info {
                            color: var(--el-color-info);
                            font-size: var(--el-font-size-medium);
                        }
                    }

                    .button-more {
                        width: 100%;
                        margin-top: 1rem;
                    }
                }

                .bottom-content {
                    margin: 4rem 1.5rem 0 1.5rem;

                    .content-info {
                        .info-circle {
                            width: 0.8rem;
                            height: 0.8rem;
                            border-radius: 50%;
                            display: inline-block;
                        }

                        .info-title {
                            margin-left: 0.5rem;
                        }

                        :deep(.el-progress__text) {
                            min-width: 0;
                        }

                        .circle-orange {
                            background-color: orange;
                        }

                        .circle-violet {
                            background-color: #c507f5;
                        }

                        .circle-blue {
                            background-color: blue;
                        }

                        .circle-green {
                            background-color: green;
                        }

                        .circle-silver {
                            background-color: silver;
                        }
                    }
                }

                .visitor-box {
                    height: 400px;
                }
            }
        }
    }
}

h3 {
    display: inline-block;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
}

h5 {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.2;
}

h6 {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 600;
}

// 暗黑样式
@at-root .dark {
    .ba-card-border {
        border-color: #353535;
    }

    .wellcom-div {
        background: none !important;
    }
}
</style>
